<template>
	<template v-if="item.pluginCode">
		<component
			:is="slots[item.pluginCode]"
			:rowData="{ item, loading }"
			@itemClick="handleClick"
		></component>
	</template>
	<template v-else-if="type === 'SEPERATOR'"
		><span class="app-view-toolbar__seperator">|</span></template
	>
	<AppExportExcel
		v-else-if="
			type === 'DEUIACTION' &&
			item.uiAction &&
			item.uiAction.uIActionTag === 'ExportExcel'
		"
		@click.stop
		@export-excel="handleExcel"
	>
		<AppButton :loading="loading" :class="classNames" :type="buttonType">
			<AppIconText
				:imgPath="item.imagePath"
                :imgPathX="item.imagePathX"
                :imgSize="item.imageSize"
				:iconClass="item.iconCls"
				:loading="loading"
				:text="
					item.captionLanResTag
						? $t(item.captionLanResTag, item.caption)
						: item.caption
				"
				:tooltip="
					item.tooltipLanResTag
						? $t(item.tooltipLanResTag, item.tooltip)
						: item.tooltip
				"
			></AppIconText>
		</AppButton>
	</AppExportExcel>
	<AppButton
		v-else
		@click="handleClick"
		:loading="loading"
		:disabled="item.disabled"
		:class="classNames"
		:type="buttonType"
	>
		<AppIconText
			:imgPath="item.imagePath"
            :imgPathX="item.imagePathX"
            :imgSize="item.imageSize"
			:iconClass="item.iconCls"
			:loading="loading"
			:text="
				item.captionLanResTag
					? $t(item.captionLanResTag, item.caption)
					: item.caption
			"
			:tooltip="
				item.tooltipLanResTag
					? $t(item.tooltipLanResTag, item.tooltip)
					: item.tooltip
			"
		></AppIconText>
	</AppButton>
</template>

<script setup lang="ts">
import { toolbarItemProps } from '../toolbar';
import { AppExportExcel } from '@components/common/export-excel';
import { deepCopy, IParam } from '@/core';
const props = defineProps(toolbarItemProps);
const emit = defineEmits(['itemClick']);
const type = computed(() => {
	return props.item.itemType;
});
//	按钮类型
const buttonType = computed(() => {
	//	50: 不常用操作 250: 关键操作
	switch (props.item.actionLevel) {
		case '50':
			return 'yellow';
		case '250':
			return 'primary';
		default:
			return 'default';
	}
});
//	样式名
const classNames = computed(() => {
	return {
		'toolbar-item__btn': true,
	};
});

const handleClick = (event: MouseEvent) => {
	emit('itemClick', props.item.name, event, props.item.logic);
};

const handleExcel = (params: IParam) => {
	const logic = deepCopy(props.item.logic);
	Object.assign(logic, params);
	emit('itemClick', props.item.name, {}, logic);
};
</script>
